<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./font/iconfont.css">
    <style>
      #container {
        position: relative;
        width: 590px;
        height: 470px;
        margin: 0 auto;
        border: 1px solid #ddd;
      }

      #container .prev-btn,.next-btn {
        position: absolute;
        width: 25px;
        height: 35px;
        background: rgba(00,00,00,.3);
        color: #fff;
        text-align: center;
        line-height: 35px;
        z-index: 2;
      }

      #container .prev-btn:hover {
        background: rgba(00,00,00,.6);
      }

      #container .next-btn:hover {
        background: rgba(00,00,00,.6);
      }

      #container .prev-btn {
        top: 50%;
        left: 0;
        transform: translate(0, -50%);
        border-top-right-radius: 17.5px;
        border-bottom-right-radius: 17.5px;
      }

      #container .next-btn {
        top: 50%;
        right: 0;
        transform: translate(0, -50%);
        border-top-left-radius: 17.5px;
        border-bottom-left-radius: 17.5px;
      }

      .circle-list {
        position: absolute;
        display: flex;
        list-style: none;
        padding: 0;
        margin: 0;
        bottom: 20px;
        left: 50%;
        transform: translate(-50%, 0);
        z-index: 2;
      }

      .circle-list li {
        width: 10px;
        height: 10px;
        background: rgba(255, 255, 255, 0.4);
        /* background: red; */
        margin: 0 5px;
        border-radius: 50%;
        z-index: 2;
        cursor: pointer;
        border: 2px solid transparent;
        box-sizing: border-box;
      }

      .circle-list li.active {
        background: #fff;
        border: 2px solid rgba(0,0,0,.5);
      }

      .img-list {
        position: relative;
        list-style: none;
        padding: 0;
        margin: 0;
        width: 100%;
        height: 100%;
      }

      .img-list li {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        z-index: 0;
        transition: linear .5s;
      }

      .img-list li.active {
        opacity: 1;
        z-index: 1;
      }
    </style>
</head>
<body>
    <!-- 要求：
        1.定义一个容器div id值为container
        2.长宽590*470，边框颜色#aaa
        3.把所有的图片绝对定位，然后定在左上方
    -->

    <!-- 图标字体 -->
    <div id="container">
      <div class="prev-btn iconfont iconzuojiantou-copy"></div>

      <ul class="img-list">
        <li class="active">
          <img src="./image/1.jpg" alt="">
        </li>
        <li>
          <img src="./image/2.jpg" alt="">
        </li>
        <li>
          <img src="./image/3.jpg" alt="">
        </li>
        <li>
          <img src="./image/4.jpg" alt="">
        </li>
        <li>
          <img src="./image/5.jpg" alt="">
        </li>
        <li>
          <img src="./image/6.jpg" alt="">
        </li>
      </ul>

      <ul class="circle-list">
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>

      <div class="next-btn iconfont iconarrow-right"></div>
    </div>

    <script>
      var imgIndex = 0
      var prevBtn = document.getElementsByClassName('prev-btn')[0]
      var nextBtn = document.getElementsByClassName('next-btn')[0]
      var circleBtns = document.querySelectorAll('.circle-list li')

      prevBtn.onclick = function () {
        if (imgIndex === 0) {
          imgIndex = 5
        } else {
          imgIndex -= 1
        }

        changeActive(imgIndex)
      }

      nextBtn.onclick = function () {
        if (imgIndex === 5) {
          imgIndex = 0
        } else {
          imgIndex += 1
        }

        changeActive(imgIndex)
      }

      circleBtns.forEach(function (item, index) {

        item.onclick = function (e) {
          changeActive(index)
        }
      })

      function changeActive (index) {
        var lis = document.querySelectorAll('.img-list li')

        lis.forEach(function (item) {
          item.className = ''
        })

        lis[index].className = 'active'

        circleBtns.forEach(function (item) {
          item.className = ''
        })

        circleBtns[index].className = 'active'
      }
    </script>
</body>
</html>